<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet/less" type="text/css" href="./index.less"/>
  <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
</head>
<body>
<div>1231231</div>
<div class="color">trial</div>
<script>
  // 库存趋势

  this.$http.get('/bigdata/despatch/stockTrend').then((res) => {
    res = res.data
    if (res.code == 200) {
      var stock = echarts.init(document.getElementById('stock'))
      let bgColor = '#04081100'
      let color = [
        '#fe9d01',
        '#36CE9E',
        '#EE8931',
        '#FF515A',
        '#8B5CFF',
        '#00CA69'
      ]
      let echartData = []
      res.data.timeList.forEach((item, index) => {
        echartData.push({
          name: item,
          value1: res.data.valList[index]
        })
      })
      let xAxisData = echartData.map((v) => v.name)
      let yAxisData1 = echartData.map((v) => v.value1)
      // 数组去重
      const map = new Map()
      const qc = echartData.filter(
        (key) => !map.has(key.value1) && map.set(key.value1, 1)
      )
      qc.sort(this.compare('value1'))
      // 最高点或最低点得数据
      let effectScatterData = []
      effectScatterData.push({ name: qc[0].name, value: qc[0].value1 })
      var option1 = {
        backgroundColor: bgColor,
        color: color,
        legend: {
          center: true,
          top: 10,
          show: false,
          data: ['库存趋势'],
          textStyle: {
            color: '#00DEFF'
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          textStyle: {
            color: '#666'
          },
          formatter: '{a} <br/>{b} : {c} 万吨'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            boundaryGap: false, // 不留白，从原点开始
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: 'rgba(255, 255, 255,0.7)'
              }
            },
            axisLabel: {
              inside: false,
              textStyle: {
                color: 'rgba(255, 255, 255,0.7)', // x轴颜色
                fontWeight: 'normal',
                fontSize: '14',
                lineHeight: 22
              }
            },

            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：次',
            axisLabel: {
              textStyle: {
                color: 'rgba(255, 255, 255,0.7)'
              }
            },
            nameTextStyle: {
              color: 'rgba(255, 255, 255,0.7)',
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -20]
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255,0.3)'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                type: 'solid',
                color: 'rgba(255, 255, 255,1)'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '库存趋势',
            type: 'line',
            smooth: true, //是否平滑
            // showSymbol: false,/
            symbolSize: 2,
            zlevel: 1,
            lineStyle: {
              normal: {
                color: color[0],
                // shadowBlur: 1,
                shadowColor: '#f5f503',
                shadowBlur: 10
                // shadowColor: hexToRgba(color[0], 0.3),
                // shadowOffsetY: 8
              }
            },
            markPoint: {
              symbol:
                'path://M170.666667 85.333333 853.333333 85.333333C900.266667 85.333333 938.666667 123.733333 938.666667 170.666667L938.666667 682.666667C938.666667 729.6 900.266667 768 853.333333 768L682.666667 768 512 938.666667 341.333333 768 170.666667 768C123.733333 768 85.333333 729.6 85.333333 682.666667L85.333333 170.666667C85.333333 123.733333 123.733333 85.333333 170.666667 85.333333Z',
              symbolKeepAspect: false,
              symbolSize: [70, 40],
              symbolOffset: [0, -36],
              silent: false,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#0285bf' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#0285bf' // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              },
              label: {
                show: true,
                offset: [0, -3],
                formatter: '库存：\n{c}万吨', //单位
                textStyle: {
                  color: '#fff'
                }
              },
              data: [
                {
                  type: 'max',
                  name: '最大值'
                }
              ]
            },
            data: yAxisData1
          },
          {
            // 设置涟漪特效动画
            type: 'effectScatter',
            // 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2d
            coordinateSystem: 'cartesian2d',
            // 单个闪烁点 ↓
            data: [
              {
                value: [
                  effectScatterData[0].name,
                  effectScatterData[0].value
                ],
                symbolSize: 8
              }
            ], //2d坐标系--[x轴, y轴, 标记大小]

            // 多个闪烁点 ↓
            // 方法一 -- start:
            // data: [{value:['Mon',820],symbolSize:10},{value:['Tue',932],symbolSize:10}],
            // 方法一 -- end

            // 方法二 -- start:
            // data: [['Mon',820],['Tue',932]], //2d坐标系--[x轴, y轴, 标记大小]
            // symbolSize: 10,
            // 方法二 -- end

            // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
            showEffectOn: 'render',
            // 涟漪特效配置
            rippleEffect: {
              // 波纹的绘制方式,可选'stroke'和'fill'
              brushType: 'stroke',
              period: 2, //动画的时间。
              scale: 3.5 //动画中波纹的最大缩放比例。
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: '#f5f503',
                shadowBlur: 20,
                shadowColor: '#fff'
              }
            },
            zlevel: 1
          }
        ]
      }
      stock.setOption(option1)
    }
  })
</script>
</body>
</html>